<template>
    <!-- 工具栏 -->
    <div class="toolbar">
        <!-- 撤回、回复 -->
        <el-button-group class="tool-text">
            <el-tooltip class="tool" effect="dark" content="撤销" placement="bottom">
                <el-button type="text" icon="el-icon-back" :disabled="toolDisabled" @click="undoChange()"></el-button>
            </el-tooltip>
            <el-tooltip class="tool" effect="dark" content="恢复" placement="bottom">
                <el-button type="text" icon="el-icon-right" :disabled="toolDisabled" @click="redoChange()"></el-button>
            </el-tooltip>
        </el-button-group>
        <div class="toolbar_devider"></div>
        <!-- 字体 -->
        <el-dropdown trigger="click" :disabled="toolDisabled">
            <el-tooltip class="tool" effect="dark" content="字体" placement="bottom">
                <el-button plain>
                    <span class="tool-font-size">{{ dictFontFamily(fontFamily) }}</span>
                    <i class="el-icon-arrow-down"></i>
                </el-button>
            </el-tooltip>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item, index) in fontFamilyData" :key="index">
                    <el-button :class="['button-dropdown-family', {active: item.value == fontFamily}]" type="text" @click="fontFamilyChange(item)">{{ item.name }}</el-button>
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <!-- 字号 -->
        <el-dropdown trigger="click" :disabled="toolDisabled">
            <el-tooltip class="tool" effect="dark" content="字号" placement="bottom">
                <el-button plain>
                    <span class="tool-font-size">{{ dictFontSize(fontSize) }}</span>
                    <i class="el-icon-arrow-down"></i>
                </el-button>
            </el-tooltip>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(item, index) in fontSizeData" :key="index">
                    <el-button :class="['button-dropdown', {active: item.PX == fontSize}]" type="text" @click="fontSizeChange(item)">{{ item.font }} ({{item.PX}})</el-button>
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <div class="toolbar_devider"></div>
        <!-- 文字 -->
        <el-button-group class="tool-text">
            <el-tooltip class="tool" effect="dark" content="粗体" placement="bottom">
                <el-button type="text" icon="el-icon-ump-jiacu" :disabled="toolDisabled" @click="boldChange()"></el-button>
            </el-tooltip>
            <el-tooltip class="tool" effect="dark" content="斜体" placement="bottom">
                <el-button type="text" icon="el-icon-ump-xieti" :disabled="toolDisabled" @click="italicChange()"></el-button>
            </el-tooltip>
            <el-tooltip class="tool" effect="dark" content="下划线" placement="bottom">
                <el-button type="text" icon="el-icon-ump-zitixiahuaxian" :disabled="toolDisabled" @click="underlineChange()"></el-button>
            </el-tooltip>
            <el-tooltip class="tool" effect="dark" content="删除线" placement="bottom">
                <el-button type="text" icon="el-icon-ump-strikethrough" :disabled="toolDisabled" @click="strikeThroughChange()"></el-button>
            </el-tooltip>
            <el-tooltip class="tool" effect="dark" content="本文颜色" placement="bottom">
                <el-button type="text" class="font-color" :disabled="toolDisabled">
                    <el-color-picker ref="colorPicker" v-model="color" :disabled="toolDisabled" @change="colorChange"></el-color-picker>
                </el-button>
            </el-tooltip>
        </el-button-group>
        <div class="toolbar_devider"></div>
        <!-- 对齐 -->
        <el-button-group class="tool-text">
            <el-tooltip class="tool" effect="dark" content="左对齐" placement="bottom">
                <el-button type="text" icon="el-icon-ump-juzuoduiqi" :disabled="toolDisabled" @click="alignLeftChange()"></el-button>
            </el-tooltip>
            <el-tooltip class="tool" effect="dark" content="居中对齐" placement="bottom">
                <el-button type="text" icon="el-icon-ump-juzhongduiqi" :disabled="toolDisabled" @click="alignCenterChange()"></el-button>
            </el-tooltip>
            <el-tooltip class="tool" effect="dark" content="右对齐" placement="bottom">
                <el-button type="text" icon="el-icon-ump-juyouduiqi" :disabled="toolDisabled" @click="alignRightChange()"></el-button>
            </el-tooltip>
            <el-tooltip class="tool" effect="dark" content="增加缩进" placement="bottom">
                <el-button type="text" icon="el-icon-s-fold" :disabled="toolDisabled" @click="indentChange()"></el-button>
            </el-tooltip>
            <el-tooltip class="tool" effect="dark" content="减少缩进" placement="bottom">
                <el-button type="text" icon="el-icon-s-unfold" :disabled="toolDisabled" @click="outdentChange()"></el-button>
            </el-tooltip>
        </el-button-group>
        <div class="toolbar_devider"></div>
        <el-tooltip class="tool" effect="dark" content="行高（单位PT）" placement="bottom">
            <el-input-number v-model="lineHeight" :disabled="toolDisabled" controls-position="right" :min="10" :max="100" @change="lineHeightChange"></el-input-number>
        </el-tooltip>
    </div>
</template>

<script>
import Observer from "@/utils/eventBus.js";
export default {
    name: "ReportToolbar",
    props: {
        selectItem: {
            type: Object
        }
    },
    data() {
        return {
            toolDisabled: true, // tool 工具栏仅针对（某些）组件使用
            color: "#000000", // 默认颜色
            fontSize: "14px", // 默认字号
            fontSizeData: [
                {
                    font: "初号",
                    PT: "42pt",
                    PX: "56px"
                },
                {
                    font: "小初",
                    PT: "36pt",
                    PX: "48px"
                },
                {
                    font: "38px",
                    PT: "28pt",
                    PX: "38px"
                },
                {
                    font: "一号",
                    PT: "26pt",
                    PX: "34px"
                },
                {
                    font: "小一",
                    PT: "24pt",
                    PX: "32px"
                },
                {
                    font: "二号",
                    PT: "22pt",
                    PX: "29px"
                },
                {
                    font: "小二",
                    PT: "18pt",
                    PX: "24px"
                },
                {
                    font: "三号",
                    PT: "16pt",
                    PX: "21px"
                },
                {
                    font: "小三",
                    PT: "15pt",
                    PX: "20px"
                },
                {
                    font: "四号",
                    PT: "14pt",
                    PX: "18px"
                },
                {
                    font: "小四",
                    PT: "12pt",
                    PX: "16px"
                },
                {
                    font: "五号",
                    PT: "10.5pt",
                    PX: "14px"
                },
                {
                    font: "小五",
                    PT: "9pt",
                    PX: "12px"
                }
            ],
            fontFamily: "initial",
            fontFamilyData: [
                {
                    name: "默认",
                    value: "initial"
                },
                {
                    name: "宋体",
                    value: "songti"
                },
                {
                    name: "方正小标宋简体",
                    value: "fzxbsjt"
                },
                {
                    name: "楷体-GB2312",
                    value: "kt_gb2312"
                },
                {
                    name: "仿宋-GB2312",
                    value: "fs_gb2312"
                }
            ],
            lineHeight: 15
        }
    },
    methods: {
        colorChange(val) { // 文字颜色改变
            this.observerEmit({
                eventType: 'color',
                data: val
            });
            this.selectItem.style.color = val;
        },
        boldChange() { // 加粗
            this.observerEmit({ eventType: 'bold' });
        },
        italicChange() { // 斜体
            this.observerEmit({ eventType: 'italic' });
        },
        underlineChange() { // 下划线
            this.observerEmit({ eventType: 'underline' });
        },
        strikeThroughChange() { // 删除线
            this.observerEmit({ eventType: 'strikeThrough' });
        },
        undoChange() { // 撤销
            this.observerEmit({ eventType: 'undo' })
        },
        redoChange() { // 恢复
            this.observerEmit({ eventType: 'redo' })
        },
        fontFamilyChange(item) { // 字体改变
            this.fontFamily = item.value;
            this.selectItem.style.fontFamily = item.value;
            this.observerEmit({ eventType: 'fontName', data: item.value });
        },
        fontSizeChange(data) { // 字号改变
            this.fontSize = data.PX;
            this.observerEmit({
                eventType: 'fontSize',
                data: data.PX
            })
        },
        alignLeftChange() { // 左对齐
            this.observerEmit({ eventType: "justifyLeft" });
        },
        alignCenterChange() { // 居中对齐
            this.observerEmit({ eventType: "justifyCenter" });
        },
        alignRightChange() { // 右对齐
            this.observerEmit({ eventType: "justifyRight" });
        },
        indentChange() { // 增加缩进
            this.observerEmit({ eventType: "indent" });
        },
        outdentChange() { // 减少缩进
            this.observerEmit({ eventType: "outdent" });
        },
        lineHeightChange(val) { // 行高
            this.observerEmit({
                eventType: "lineHeight",
                data: val
            });
        },
        observerEmit(data) { // 观察者统一事件触发
            Observer.$emit('designTool', {
                id: this.selectItem.id,
                ...data
            })
        },
        handleDefaultTool() { // 处理默认style 样式默认值回显
            this.fontFamily = this.selectItem.style.fontFamily;
            this.fontSize = this.selectItem.style.fontSize;
            this.color = this.selectItem.style.color;
            this.lineHeight = this.selectItem.style.lineHeight;
        },
        dictFontFamily(val) { // 字体过滤
            let value = this.fontFamilyData.find(item => item.value == val)?.name || "";
            return value;
        },
        dictFontSize(val) { // 字号过滤
            let value = this.fontSizeData.find(item => item.PX == val)?.font || "";
            return value;
        }
    },
    watch: {
        selectItem(val) {
            if (val.toolbar) {
                this.toolDisabled = false;
                this.handleDefaultTool();
            }
            else this.toolDisabled = true;
        }
    }
}
</script>

<style>
    @import url('./ReportToolbar.css');
</style>